<template>
    <div>
        回复信息列表
        <span> {{invid}}</span>
        <button @click="addReplay">添加回复</button>
        <el-dialog title="添加回复" v-model="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="回复内容" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.content" rows="5"></el-input>
                </el-form-item>
                <el-form-item label="回复用户" :label-width="formLabelWidth">
                    <el-input v-model="form.author"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submitAddReplay">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="发布人">
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="发帖时间">
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    import {
        getReplayListRequest,
        submitAddReplayRequest
    } from '../assets/js/request'
    export default {
        name: "ReplayDetail",
        data(){
            return{
                invid:-1,
                tableData: [],
                dialogFormVisible: false,
                form: {
                    content: '',
                    author: '匿名用户'
                },
                formLabelWidth: '120px'
            }
        },
        mounted() {

        },
        created() {
            this.invid = this.$route.params.invid
            const params = { invid: this.invid}
           this.getReplayList(params)
        },
        methods:{
            getReplayList(params){
                getReplayListRequest(params)
                .then((res)=>{
                        //请求成功的回调函数
                        console.log(res)
                        this.tableData = res
                    }).catch((err)=>{
                    //请求失败的回调函数
                    console.log(err)
                })
            },
            submitAddReplay(){
                //TODO 提交form表单
                let data = {invid:this.invid}
                if(!this.form.author){
                    this.form.author = '匿名用户'
                }
                for(let key in this.form){
                    // console.log(key + this.form[key])
                    data[key] = this.form[key];
                }
                debugger
                submitAddReplayRequest(data)
                .then(res=> {
                    console.log(res);
                    if(res.status == '200'){
                        let dataTemp = {invid:this.invid}
                        this.getReplayList(dataTemp)
                        this.$message({
                            message: '恭喜你，添加回复成功',
                            duration:3000,
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.log(error);
                });
                this.dialogFormVisible = false;
            },
            addReplay(){
                console.log(this.invid)
                this.dialogFormVisible = !this.dialogFormVisible;
            }
        }
    }
</script>

<style scoped>

</style>